<style lang="scss">
.newsearch {
  margin-top: 10px;
  display: flex;
  input {
    width: 80%;
    height: 30px;
    padding: 0 9rem;
    border: 1px solid #e5e5e5;
    background: #f5f5f5;
    border-radius: 5px;
  }
}
.searchimg {
  position: absolute;
  left: 160px;
  width: 20px;
  height: 20px;
  margin-top: 5px;
}
.box {
  width: 25rem;
  height: 25rem;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
}
.box dl {
  width: 5rem;
  height: 6.25rem;
  margin-left: 10px;
}
.box dd {
  width: 4rem;
  height: 1.875rem;
  margin-left: 1rem;
}
</style>
<template>
  <div>
    <van-nav-bar
      title="饮食宜忌"
      left-arrow
      @click-left="onClickLeft"
      van-nav-bar-icon-color="black"
    />
  </div>
  <div class="newsearch">
    <input type="text" name="" id="" placeholder="搜索" />
    <img src="../../assets/fang.png" alt="" class="searchimg" />
  </div>
  <div class="box">
    <dl>
      <dt><img src="../../assets/Gourmet/美食.png" alt="" /></dt>
      <dd>主食</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食2.png" alt="" /></dt>
      <dd>加工食品</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食3.png" alt="" /></dt>
      <dd>蔬类菌类</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食4.png" alt="" /></dt>
      <dd>肉/蛋类</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食5.png" alt="" /></dt>
      <dd>水果</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食6.png" alt="" /></dt>
      <dd>补品草药</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食7.png" alt="" /></dt>
      <dd>水产品</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食8.png" alt="" /></dt>
      <dd>调味品</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食9.png" alt="" /></dt>
      <dd>饮品</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食10.png" alt="" /></dt>
      <dd>零食小吃</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食11.png" alt="" /></dt>
      <dd>豆奶制品</dd>
    </dl>
    <dl>
      <dt><img src="../../assets/Gourmet/美食12.png" alt="" /></dt>
      <dd>坚果类</dd>
    </dl>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const onClickLeft = () => {
  router.go(-1)
}
</script>
